import Grid from "@material-ui/core/Grid";
import {Carousel, WingBlank} from "antd-mobile";
import * as React from "react";
import {Link} from "react-router-dom";
import config from "./ui";

const News = ({id, title, content}: any) => {
    return (
        <Grid item={true} xs={12} key={id}>
            <h3>
                {title}
            </h3>
            <p>
                {content}
            </p>
        </Grid>
    );
};

const Footer = ({name, index, contents}: any) => {
    return (
        <Grid className={"footer padding-h"} key={name}>
            <Grid item={true} xs={12}>
                <h2>
                    {name}
                </h2>
            </Grid>
            {contents.map((content: any, index: number) => {
                return <News key={index} {...content} />;
            })}
        </Grid>
    );
};

const Icon = ({index, value}: any) => {
    const {to, icon, text} = value;
    return (
        <Grid key={index} item={true} xs={4}>
            <Link to={to}>
                <div className={"flex-center-column"}>
                    <div>
                        <img src={icon} className={"icon"}/>
                    </div>
                    <div style={{color: "#333"}}>{text}</div>
                </div>
            </Link>
        </Grid>
    );
};

interface state {
    images: string[];
    imgHeight: number;
    date: Date;
}

class HomePage extends React.Component<any, state> {
    public componentWillMount() {
        document.title = "首页";
        this.setState({
            images: [
                "AiyWuByWklrrUDlFignR",
                "TekJlZRVCjLFexlOCuWn",
                "IJOtIlfsYdTyaDTRVrLI"
            ],
            imgHeight: 180
        });
    }

    public render() {
        const {homepage} = config;
        const {icons, header, footer} = homepage;
        return (
            <div>
                <WingBlank style={{marginLeft: 0, marginRight: 0}}>
                    <Carousel autoplay={true} infinite={true}>
                        {this.state.images.map((image: any) => (
                            <a
                                key={image}
                                href="http://www.alipay.com"
                                style={{
                                    display: "inline-block",
                                    width: "100%",
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={`https://zos.alipayobjects.com/rmsportal/${image}.png`}
                                    alt=""
                                    style={{width: "100%", verticalAlign: "top"}}
                                />
                            </a>
                        ))}
                    </Carousel>
                </WingBlank>
                <Grid container={true}>
                    {/*中间的图标列表*/}
                    <Grid container={true} spacing={40} style={{padding: "24px"}}>
                        {icons.map((value, index) => {
                            return <Icon key={index} value={value} index={index}/>;
                        })}
                    </Grid>
                    {// 底部资讯栏
                        footer.map(each => {
                            return <Footer {...each} key={each}/>;
                        })}
                </Grid>
            </div>
        );
    }
}

export default HomePage;
